<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>艾融网络银行注册界面</title>

    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>
        body {
            overflow: hidden;
        }

        * {
            margin: 0;
            font-family: "Microsoft Yahei";
            color: #666;
        }

        .register_banner {
            width: 480px;
            height: 640px;
            position: absolute;
            top: 70px;
            right: 500px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
        }

        #register_background .register_img {
            width: 100%;
            height: 100%;
        }

        #l_content {
            position: relative;
            left: 100px;
            top: 50px;
        }

        #content {
            position: relative;
            left: 50px;
            top: 120px;
        }

        .form {
            position: absolute;
            left: 60px;
            top: -20px;
        }

        .form a {
            text-decoration: none
        }

        .form .txt {
            width: 180px;
            height: 20px;
        }

        .form span {
            position: relative;
            left: 30px;
            color: red;
        }
    </style>
    <script>
        $(function () {
            //重新获取焦点后提示语句清空
            $("#u_phone").focus(function (){
                $("span.phoneErrorMsg").text("");
            });

            $("#password").focus(function (){
                $("span.passwordErrorMsg").text("");
            });

            $("#r_password").focus(function (){
                $("span.r_passwordErrorMsg").text("");
            });

            $("#code").focus(function (){
                $(".codeErrorMsg").text("");
            });
            $("#u_idcard").focus(function (){
                $("span.idcardErrorMsg").text("");
            });

            $("#u_name").focus(function (){
                $("span.nameErrorMsg").text("");
            });
            //身份证校验
            $("#u_idcard").focusout(function (){
                var u_idcard = $("#u_idcard").val();
                //去空格
                u_idcard = $.trim(u_idcard);
                //构建正则表达式
                var u_idcardPatt = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                //3 使用test方法验证
                if (u_idcard == null || u_idcard == "") {
                    $(".idcardErrorMsg").text("身份证号不能为空！");
                } else if (!u_idcardPatt.test(u_idcard)) {
                    //4 提示用户结果
                    $(".idcardErrorMsg").text("身份证号输入错误！");
                }else {
                    //根据身份证号判断是否已有账号
                    $.ajax({
                        url: "/userServlet",
                        type: "POST",
                        data: {action: "findUserByU_idcard", u_idcard: u_idcard},
                        dataType: "json",
                        success: function (d) {
                            if(d.code == 1){
                                var flag = confirm(d.msg);
                                if(flag){
                                    //点击确定,跳转登录界面
                                    location.href="/pages/user/login.html";
                                }
                            }else {
                                $(".idcardErrorMsg").text(d.text());
                            }
                        }
                    });
                }
            });
            //用户姓名校验
            $("#u_name").focusout(function (){
                var u_name = $("#u_name").val();
                u_name = $.trim(u_name);
                if(u_name == null || u_name == ""){
                    $(".nameErrorMsg").text("用户姓名不能为空!")
                }
            });

            //手机号格式校验
            $("#u_phone").focusout(function () {
                //验证手机号格式是否正确,必须是以1开头，第二位[3,9]中的任意一个,后面9位[0，9]中的任意个数
                //获取输入框中输入的手机号
                var u_phone = $("#u_phone").val();
                u_phone = $.trim(u_phone);
                //构建正则表达式
                var u_phonePatt = /^1[3-9][0-9]{9}$/
                //3 使用test方法验证
                if (u_phone == null || u_phone == "") {
                    $("span.phoneErrorMsg").text("手机号不能为空！");
                } else if (!u_phonePatt.test(u_phone)) {
                    //4 提示用户结果
                    $("span.phoneErrorMsg").text("手机号输入错误！");
                }else {
                    //根据身份证号判断是否已有账号
                    $.ajax({
                        url: "/userServlet",
                        type: "POST",
                        data: {action: "findUserByU_phone", u_phone: u_phone},
                        dataType: "json",
                        success: function (d) {
                            if(d.code == 1){
                                alert(d.msg);
                                /*var flag = confirm(d.msg);
                                if(flag){
                                    //点击确定,跳转登录界面
                                    location.href="/pages/user/login.html";
                                }*/
                            }else {
                                $("#phoneErrorMsg").text(d.text());
                            }
                        }
                    });
                }
            });
            //密码格式校验
            $("#password").focusout(function () {
                //验证密码格式是否正确8-16位，由字母,数字和特殊符号至少两种集合组成
                //获取密码框中的密码
                var password = $("#password").val();
                password = $.trim(password);
                //构建正则表达式
                var paswordPatt = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![?~!,\.#&@$%()|{}"<>'\+\*\-:;^_`]+$)[?~!,\.#&@$%()|{}"<>'\+\*\-:;^_`0-9A-Za-z]{8,16}$/
                //3 使用test方法验证
                if (password == null || password == "") {
                    $("span.passwordErrorMsg").text("密码不能为空!");
                } else if (!paswordPatt.test(password)) {
                    //4 提示用户结果
                    $("span.passwordErrorMsg").text("密码为8-16位数字，字母，符号至少两种集合");
                }

            });
            //两次密码是否相同的校验
            $("#r_password").focusout(function () {
                var password = $("#password").val();
                var r_password = $("#r_password").val();
                r_password = $.trim(r_password);
                if (r_password == null || r_password == "") {
                    $("span.r_passwordErrorMsg").text("确认密码不能为空!");
                } else if (password != r_password) {
                    $("span.r_passwordErrorMsg").text("两次输入密码不一致!");
                }

            });
            //验证码点击刷新
            $("#code_img").click(function () {
                $("#code_img").attr("src","http://localhost:8080/kaptcha.jpg")
            })

            //验证码不能为空
            $("#code").focusout(function () {
                var code = $("#code").val();
                code = $.trim(code);
                if (code == null || code == "") {
                    $(".codeErrorMsg").text("验证码不能为空!")
                }
            });

            //提交判断
            $("#sub_btn").click(function () {
                //判断手机号是否为空
                var u_phone = $("#u_phone").val();
                //去除空格
                u_phone = $.trim(u_phone);
                if (u_phone == null || u_phone == "") {
                    $(".phoneErrorMsg").text("手机号不能为空!");
                    return;
                }
                //判断密码是否为空
                var password = $("#password").val();
                password = $.trim(password);
                if (password == null || password == "") {
                    $(".passwordErrorMsg").text("密码不能为空!");
                    return;
                }
                //判断重复密码是否为空
                var r_password = $("#r_password").val();
                r_password = $.trim(r_password);
                if (r_password == null || r_password == "") {
                    $(".r_passwordErrorMsg").text("重复密码不能为空!");
                    return;
                }
                //判断验证码是否为空
                var code = $("#code").val();
                code = $.trim(code);
                if (code == null || code == "") {
                    $(".codeErrorMsg").text("验证码不能为空!");
                    return;
                }
                //判断用户名是否为空
                var u_name = $("#u_name").val();
                u_name = $.trim(u_name);
                if(u_name == null || u_name == ""){
                    $("#nameErrorMsg").text("用户姓名不能为空!")
                    return;
                }
                //判断身份证是否为空
                var u_idcard = $("#u_idcard").val();
                u_idcard = $.trim(u_idcard);
                if(u_name == null || u_name == ""){
                    $("#nameErrorMsg").text("身份证号不能为空!")
                }

                //点击注册
                $.ajax({
                    url: "/userServlet",
                    type: "POST",
                    data: {action: "register", u_phone: u_phone,password:password,code:code,u_name:u_name,u_idcard:u_idcard},
                    dataType: "json",
                    success: function (d) {
                        if(d.code==1){
                            //注册成功
                            var flag = confirm(d.msg);
                            if(flag){
                                //点击确定,跳转登录界面
                                location.href="/pages/user/login.html";
                            }
                        }else {
                            if(d.code==-1){
                                //注册失败
                                alert(d.msg)
                            }else {
                                //验证码不正确
                                $(".codeErrorMsg").text(d.msg);
                            }
                        }
                    }
                });
            });
        });


    </script>
</head>
<body>
<div id="register_background">
    <img class="register_img" alt="图片无法显示" src="../../static/img/register.jpg">
</div>
<div class="register_banner">
    <div id="l_content">
        <h1>欢迎您注册网上银行</h1>
    </div>

    <div id="content">
        <div class="reg_form">
            <div class="reg_box">
                <div class="form">
                    <input type="hidden" name="action" value="login"/>
                    <label>注册账号：</label>
                    <input class="txt" type="text" placeholder="请输入手机号"
                           autocomplete="off" tabindex="1" name="u_phone" id="u_phone"/>
                    <br>
                    <span class="phoneErrorMsg"></span>
                    <br>
                    <br>
                    <label>用户姓名：</label>
                    <input class="txt" type="text" placeholder="请输入用户姓名"
                           autocomplete="off" tabindex="1" name="u_name" id="u_name"/>
                    <br>
                    <span class="nameErrorMsg"></span>
                    <br>
                    <br>
                    <label>身份证号：</label>
                    <input class="txt" type="text" placeholder="请输入身份证号"
                           autocomplete="off" tabindex="1" name="u_idcarde" id="u_idcard"/>
                    <br>
                    <span class="idcardErrorMsg"></span>
                    <br>
                    <br>
                    <label>用户密码：</label>
                    <input class="txt" type="password" placeholder="请设置密码"
                           autocomplete="off" tabindex="1" name="password" id="password"/>
                    <br>
                    <span class="passwordErrorMsg"></span>
                    <br>
                    <br>
                    <label>重复密码：</label>
                    <input class="txt" type="password" placeholder="请确认密码"
                           autocomplete="off" tabindex="1" name="password" id="r_password"/>
                    <br>
                    <span id="spn" class="r_passwordErrorMsg"></span>
                    <br>
                    <label>验&ensp;证&ensp;码：</label>
                    <input class="txt" type="text" name="code" style="width: 100px;height: 20px" id="code"
                           placeholder="请输入验证码"/>
                    <img id="code_img" alt="" src="http://localhost:8080/kaptcha.jpg"
                         style="position: relative;left: 3px; top: 10px; width: 90px;height: 40px;">
                    <br>
                    <span class="codeErrorMsg"></span>
                    <br>
                    <br>
                    <input type="button" value="注册" id="sub_btn"
                           style="width: 200px;height: 40px;position: relative;left: 40px;border-radius: 16px;"/>
<!--                    <a href="/pages/user/login.html"style="margin-left: 50px">去登录</a>-->
                    <a href="http://localhost:8080/pages/user/login.html"style="margin-left: 50px">去登录</a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>